<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <link rel="stylesheet" href="./static/css/weui.min.css">
    <link rel="stylesheet" href="./static/css/jx.css">
</head>
<body>
<div class="page button js_show">
    <div class="page__hd">
        <div class="page__title">支付记录</div>
    </div>
    <div class="weui-grids">
        <span class="weui-grid" style="padding: 5px;width: 50%;" id="briqi">
            <p class="weui-grid__label"><span>开始日期</span><i class="icon icon-ad"></i></p>
        </span>
        <span class="weui-grid" style="padding: 5px;width: 50%;" id="eriqi">
            <p class="weui-grid__label"><span>结束日期</span><i class="icon icon-ad"></i></p>
        </span>
    </div>
    <div class="weui-cells" style="margin-top: 0">
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%">
                <h4 class="weui-media-box__title">120元 <span
                        style="color: #9B9B9B;font-size: 14px">2018-12-12 12:12:12</span>
                </h4>
                <p class="weui-media-box__desc">交易流水号: <span>1234567890</span></p>
            </div>
            <span class="weui-cell__ft"></span>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%">
                <h4 class="weui-media-box__title">120元 <span
                        style="color: #9B9B9B;font-size: 14px">2018-12-12 12:12:12</span>
                </h4>
                <p class="weui-media-box__desc">交易流水号: <span>1234567890</span></p>
            </div>
            <span class="weui-cell__ft"></span>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%">
                <h4 class="weui-media-box__title">120元 <span
                        style="color: #9B9B9B;font-size: 14px">2018-12-12 12:12:12</span>
                </h4>
                <p class="weui-media-box__desc">交易流水号: <span>1234567890</span></p>
            </div>
            <span class="weui-cell__ft"></span>
        </div>

    </div>
</div>
</body>

<script type="text/javascript" src="./static/js/weui.min.js"></script>
<script type="text/javascript" src="./static/js/zepto.min.js"></script>
<script type="text/javascript">
    var form = {
        briqi: {
            year: null,
            month: null,
            day: null,
        },
        eriqi: {
            year: null,
            month: null,
            day: null,
        },
    };
    var now = new Date();
    function search() {
        console.log(form);
        weui.alert(JSON.stringify(form));
    }
    $(function () {
        $("#briqi").on("click", function () {
            var vm = this;
            weui.datePicker({
//                start: null, // 从今天开始
                end: new Date((new Date()).getTime() + 7 * 24 * 3600000),
                defaultValue: [form.briqi.year || now.getFullYear(), form.briqi.month || now.getMonth() + 1, form.briqi.day || now.getDate()],
                onConfirm: function (result) {
                    form.briqi = result[0].value + '-' + result[1].value + '-' + result[2].value;
                    $(vm).find("span").html(result[0].label + result[1].label + result[2].label);
                    search();
                },
                id: 'briqi-select'
            });
        });
        $("#eriqi").on("click", function () {
            var vm = this;
            weui.datePicker({
//                start: null, // 从今天开始
                end: new Date((new Date()).getTime() + 7 * 24 * 3600000),
                defaultValue: [form.eriqi.year || now.getFullYear(), form.eriqi.month || now.getMonth() + 1, form.eriqi.day || now.getDate()],
                onConfirm: function (result) {
                    form.eriqi = result[0].value + '-' + result[1].value + '-' + result[2].value;
                    $(vm).find("span").html(result[0].label + result[1].label + result[2].label);
                    search();
                },
                id: 'eriqi-select'
            });
        });
    });
</script>
</html>
